<template>
  <div class="FireProtection">
    <!--地图 B-->
    <Map ref='baseMap'></Map>
    <!--地图 E-->

    <div class="frame">
      <div class="operation">
        <div class="operation_l">
          <span>基础设施</span>
        </div>
        <div class="operation_r">
          <img src="../../static/img/sel_ Collapse.png" alt="" @click="showSX = false" v-if="showSX">
          <img src="../../static/img/sel_ Expand.png" alt="" @click="showSX = true" v-if="!showSX">
        </div>
      </div>

      <div class="inbreakList" v-show="showSX">

        <!--第一层盒子-->
        <div class="fptBox">
          <div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="item in fpt" @change="drawGeoJson(checkList,item)"
                style="margin: .2rem .2rem;display: block;" :label="item.name" :key="item.name"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!--第一层盒子-->

      </div>

    </div>

  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'
import Map from './Map.vue'
export default {
  components: { Map },
  data() {
    return {
      showSX: true,
      checkList: [],
      fpt: [],
      checked: true,
      areaId: ""
    }
  },
  created() {
    this.areaId = window.sessionStorage.getItem('areaId');
  },
  mounted() {
    // this.getshpData();
    this.getShpByGroup();
    this.gas();
  },
  methods: {
    gas() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.getAreaScope, {
          areaId: vm.areaId
        })
        if (res.data.code == '200') {
          let arr = [], data = res.data.data;

          for (let key in data) {
            let z = {
              id: data[key].id,
              name: data[key].tag,
              borderColor: data[key].borderColor,
              fillColor: data[key].fillColor,
              iconSrc: "",
              data: {},
              geojson: data[key].geojson
            }
            arr.unshift(z);
          }
          if (arr.length > 0) {
            vm.$refs.baseMap.previewshape(arr, 'gascope');
          }
        }

      })()
    },
    getShpByGroup() {
      let vm = this;
      (async function () {
        let res = await http.get(api.ShpByGroup, {
          areaId: vm.areaId
        })
        if (res.data.code == '200') {
          vm.fpt = res.data.data;
        }
      })()
    },
    drawGeoJson(arr, peg) {
      if (arr.indexOf(peg.name) == -1) {
        let id = peg.layers[0].id + '_fp';
        this.$refs.baseMap.dellayer(id);
        //list.namelist.splice(list.namelist.indexOf(peg.name), 1)
      } else {
        let arr = [];
        peg.layers.forEach(item => {
          let mtl = [];
          let img = '';
          for (let key in item.labelMap) {
            let o = {
              name: key,
              value: item.labelMap[key]
            }
            mtl.push(o)

            // 电站
            // 旅游点
            // 界碑
            // 样地
            // 宣传牌
            // 水库
            // 图幅
            // 界桩
            // 气象站
            // 瞭望塔
            // 红外相机
            // 居民点
            // 视频监控
            // 地名
            // 保护站
            // 资源采集

            if (peg.name == '电站') {
              img = '../../static/img/map/dianzhan_anchor_bottom_center.png';
            }
            if (peg.name == '旅游点') {
              img = '../../static/img/map/lvyoudian_anchor_bottom_center.png';
            }
            if (peg.name == '界碑') {
              img = '../../static/img/map/jiebei_anchor_bottom_center.png';
            }
            if (peg.name == '样地') {
              img = '../../static/img/map/yangdi_anchor_bottom_center.png';
            }
            if (peg.name == '宣传牌') {
              img = '../../static/img/map/xuanchuanpai_anchor_bottom_center.png';
            }
            if (peg.name == '水库') {
              img = '../../static/img/map/shuiku_anchor_bottom_center.png';
            }
            if (peg.name == '图幅') {
              img = '../../static/img/map/tufu_anchor_bottom_center.png';
            }
            if (peg.name == '界桩') {
              img = '../../static/img/map/jiezhuang_anchor_bottom_center.png';
            }
            if (peg.name == '气象站') {
              img = '../../static/img/map/qixiangzhan_anchor_bottom_center.png';
            }
            if (peg.name == '瞭望塔') {
              img = '../../static/img/map/liaowangta_anchor_bottom_center.png';
            }
            if (peg.name == '红外相机') {
              img = '../../static/img/map/hongwaixiangji_anchor_bottom_center.png';
            }
            if (peg.name == '居民点') {
              img = '../../static/img/map/jumindian_anchor_bottom_center.png';
            }
            if (peg.name == '视频监控') {
              img = '../../static/img/map/shipinjiankong_anchor_bottom_center.png';
            }
            if (peg.name == '地名') {
              img = '../../static/img/map/diming_anchor_bottom_center.png';
            }
            if (peg.name == '保护站') {
              img = '../../static/img/map/baohuzhan_anchor_bottom_center.png';
            }
            if (peg.name == '资源采集') {
              img = '../../static/img/map/ziyuancaiji_anchor_bottom_center.png';
            }

          }
          let Mapimg = [];
          if (item.url != null) {
            Mapimg.push(item.url)
          }
          let z = {
            id: item.id,
            // name: item.groupName == '路网系统' ? item.tag : '',
            name: item.name,
            borderColor: item.borderColor == null ? "#ffffff" : item.borderColor,
            fillColor: item.geojson.type == 'Point' ? img : item.fillColor,
            iconSrc: img,
            data: {
              type:'森林防火',
              mtl: mtl,
              id: item.id,
              size: 5,
              isdetails: false,
              mediaList: Mapimg
            },
            geojson: item.geojson
          }
          arr.push(z);
        })
        this.$refs.baseMap.previewshape(arr, peg.layers[0].id + '_fp');
        // list.namelist.push(peg.name)
      }
      /* if (list.value[0].value.sort().toString() == list.namelist.sort().toString()) {
         list.value[0].checked = true
       } else {
         list.value[0].checked = false
       }*/
    },
    getshpData() {
      let vm = this;
      (async function () {
        let res = await http.get(api.shpData, {
          areaId: vm.areaId
        })
        if (res.data.code == '200') {
          vm.fpt = res.data.data;
        }
      })()
    },
    handleCheckedCitiesChange(val) {
      console.log(val);
    }
  }
}

</script>
<style scoped>
@import "../../static/css/FireProtection.css";
</style>
